
	//展示列表
	// 1. 准备一个放置任务列表的数组
	var taskAry = []
	var todo_list = $('#todo_list')
	var taskInp = $('#task')
	var todo_count = $('#count')
	// 2. 向服务器端发送请求，获取已存在的任务
	$.ajax({
		url: '/todo/task',
		type: 'get',
		success: (res) => {
			// 3. 将已存在的任务存储在任务列表数组中
			taskAry = res;
			// console.log(taskAry);
			Unfinishedtask()
			resStr()
		}

	})

	function resStr() {
		// 4. 通过模板引擎将任务列表数组中的任务显示在页面中
		var html = template('taskTpl', {
			tasks: taskAry
		})
		// console.log(html);
		// console.log(todo_list);
		// 4. 通过模板引擎将任务列表数组中的任务显示在页面中
		todo_list.html(html);
	}

	// 添加任务

	// 1. 为文本框绑定键盘抬起事件， 在事件处理函数中判断当前用户敲击的是否是回车键
	$('.new-todo').on('keyup', function (e) {
		// console.log(e.keyCode);
		if (e.keyCode === 13) {
			// 2. 当用户敲击回车键的时候， 判断用户在文本框中是否输入了任务名称
			var tasks = $(this).val()
			if (tasks.trim() == 0) return alert('请输入任务名称')
			if (taskAry.some(v => v.title === tasks)) {
				return alert('该任务名称已存在')
			}

			$.ajax({
				type: 'post',
				url: '/todo/addTask',
				contentType: 'application/json',
				data: JSON.stringify({
					title: tasks
				}),
				// 3. 向服务器端发送请求， 将用户输入的任务名称添加到数据库中， 同时将任务添加到任务数组中
				success: (res) => {
					taskAry.push(res)
					// console.log(res)
					taskInp.val('')
					// 4. 通过模板引擎将任务列表数组中的任务显示在页面中
					Unfinishedtask()
					resStr()
				}
			})
		}
	})

	//删除任务
	// 1. 为删除按钮添加点击事件
	todo_list.on('click', '.destroy', function () {
		var id = $(this).attr("data-id");
		console.log(id);
		$.ajax({
			url: '/todo/deleteTask',
			type: 'get',
			data: {
				_id: id
			},
			success: (res) => {
				var id_rem = taskAry.findIndex((item) => {
					item.id == id
				})
				taskAry.splice(id_rem, 1);
				Unfinishedtask()
				resStr()
			}
		})
	})

	// 2. 在事件处理函数中获取到要删任务的id
	// 3. 向服务器端发送请求，根据ID删除任务，同时将任务数组中的相同任务删除
	// 4. 通过模板引擎将任务列表数组中的任务重新显示在页面中
	// 	更改任务状态

	// 1. 为任务复选框添加onchange事件
	todo_list.on('change', '.toggle', function () {
		// 2. 在事件处理函数中获取复选框是否选中
		var status = $(this).is(':checked');
		var id = $(this).siblings('.destroy').attr('data-id')
		// console.log(cons_id);

		// console.log(status);
		// 3. 向服务器端发送请求，将当前复选框的是否选中状态提交到服务器端
		$.ajax({
			url: '/todo/modifyTask',
			type: 'post',
			contentType: 'application/json',
			data: JSON.stringify({
				_id: id,
				completed: status
			}),
			success: (res) => {
				console.log(res);
				var tasks = taskAry.find(item => item._id == id);
				tasks.completed = res.completed;
				Unfinishedtask()
				resStr()
			}
		})
	})
	// 4. 将任务状态同时也更新到任务列表数组中
	// 5. 通过模板引擎将任务列表数组中的任务重新显示在页面中并且根据任务是否完成为li元素添加completed类名

	// 	修改任务名称
	// 1. 为任务名称外层的label标签添加双击事件，同时为当前任务外层的li标签添加editing类名，开启编辑状态
	todo_list.on('dblclick', 'label', function () {
		$(this).parent().parent().addClass('editing');
		$(this).parent().siblings('input').val($(this).text())
		$(this).parent().siblings('input').focus()
		// 2. 将任务名称显示在文本框中并让文本框获取焦点
	})
	todo_list.on('blur', '.edit', function () {
		var newtask = $(this).val();
		// console.log(newtask);
		var id = $(this).siblings().find('.destroy').attr('data-id')
		// console.log(id);
		// 3. 当文本框离开焦点时，将用户在文本框中输入值提交到服务器端，并且将最新的任务名称更新到任务列表数组中
		// 4. 使用模板引擎重新渲染页面中的任务列表。
		axios.post('/todo/modifyTask', {
				_id: id,
				title: newtask
			})
			.then(function (res) {
				var newtitle = res.data;
				var tasks = taskAry.find(item => item._id == id);
				tasks.title = newtitle.title;
				Unfinishedtask()
				resStr()
			})
			.catch(function (error) {
				alert(error)
			})
	})


	// 	计算未完成的任务数量
	function Unfinishedtask() {
		var Utask = 0;
		var newUtask = taskAry.filter(item => item.completed == false)
		// console.log(newUtask);
		Utask = newUtask.length;
		todo_count.text(Utask)

	}
	// 1. 准备一个用于存储未完成任务数量的变量
	// 2. 将未完成任务从任务数组中过滤出来
	// 3. 将过滤结果数组的长度赋值给任务数量变量
	// 4. 将结果更新到页面中